import createMatcher from './create-matcher'
import install from './install'
import HashHistory from './history/hash'
import BrowserHistory from './history/history'

class VueRouter {
  constructor(options) {
    // 根据当前用户传入的配置和当前的路径 渲染对应的组件

    // 创建匹配器 用于后续的匹配操作
    /**
     * 导出的方法
     * 1. match通过路由来匹配组件
     * 2. addRoutes动态添加匹配规则
     */
    this.matcher = createMatcher(options.routes || [])
    
    // 我需要根据不同的路径进行切换
    options.mode = options.mode || 'hash'  //没有传入默认就是'hash'
    switch (options.mode) {
      case 'hash':
        this.history = new HashHistory(this)
        break;
      case 'history': 
      this.history = new BrowserHistory(this)
        break
    }

    this.beforeHooks = []
  }

  init(app) {
    // 监听hash值变化 默认跳转到对应的路径中
    const { history } = this
     /**
     * 涉及到的方法
     * 1. setUpListener 监听hash的变化，放到hash类中
     * 2. transitionTo  放到bash中
     * 3. getCurrentLocation  在各自类中声明
     */
    const setUpHashListener = () => {
      history.setUpListener()   // 监听路由变化 hashChange
    }

    // 保证系统中响应式的_route发生变化
    history.listen((route) => {
      app._route = route
    })

    // 初始化 会获得当前hash值 进行跳转，并且监听hash变化
    history.transitionTo(
      history.getCurrentLocation(),    // 获取当前的path
      setUpHashListener
    )
  }

  match(location) {
    return this.matcher.match(location)
  }

  beforeEach(fn) {
    this.beforeHooks.push(fn)
  }
}
VueRouter.install = install

export default VueRouter

// 默认vue-router插件会导出一个类，用户会new Router()